<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let name = "张三";
    let age=18;
    let like = "学习";
    function sex(){
        return "男"
    }
    let user = ["张飞","赵云","关羽"] 
    let isHero = false;
    let obj = {
        name:"ali",
        sex:"女"
    }
    // {} 数据绑定渲染数组时默认会将数组中的每一项展开渲染 若渲染布尔值时默认渲染为空 直接渲染对象时报错 渲染对象中中各个属性不会报错     大括号可以写js表达式（变量 三目运算法则  函数方法 属于式子）

    {
            /* 
               jsx语法 会自动将 数组 转化为字符串渲染到页面
            */
        }
    let h1 = <h1>我叫{name}今年{age}喜欢{like.substr(0,1)} 是个{sex()}  {user}----{isHero}----{obj.name}----{obj.sex}</h1>
    console.log(h1)
    ReactDOM.render(h1,document.getElementById("root"))
</script>
</html>